<%@ page import="java.util.*,util.*,dal.*,model.*,bll.*,java.text.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>	
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%
	List<ProjectModel> projectList = CacheUtil.getProjectList();
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Buzz Communication</title>

<link rel='stylesheet' type='text/css' href='css/common.css' />

	<link rel="stylesheet" type="text/css" href="css/buzz-design.css"/>
	<link rel='stylesheet' type='text/css' href='css/project-slide.css'/>
	<link rel="stylesheet" type="text/css" href="calendar/css/calendar.css"/>
	
	<script type='text/javascript' src='js/jquery.js'></script>
	<script type='text/javascript' src='js/project-slide.js'></script>	
	<script src="calendar/js/jMonthCalendar-1.0.1.js" type="text/javascript"/></script>
	
<script type='text/javascript'>
$(document).ready(function() {
	//var today = new Date();
	//todayString = today.getDate() + " " + today.getMonth() + " " + today.getFullYear();
	//alert(todayString);
	
	var options = {
		onMonthChanged: function(dateIn) {
			//this could be an Ajax call to the backend to get this months events
			var events = [ 	{ EventID: 1, "Date": new Date(2009, 1, 1), "Title": "10:00 pm - EventTitle1", URL: "http://www.pertnearsandstone.com/Events/1" },
							{ EventID: 2, "Date": new Date(2009, 1, 2), "Title": "9:30 pm - this is a much longer title", URL: "http://www.pertnearsandstone.com/Events/1" }
			];

			$.jMonthCalendar.ReplaceEventCollection(events);
			return true;
		}
	};
	var events = [ 	{ EventID: 1, "Date": new Date(2009, 0, 1), "Title": "10:00 pm - EventTitle1", URL: "http://www.pertnearsandstone.com/Events/1" },
					{ EventID: 2, "Date": new Date(2009, 0, 2), "Title": "9:30 pm - this is a much longer title", URL: "http://www.pertnearsandstone.com/Events/1" }

	];
	var newoptions = { };
	var newevents = [ ];
	$.jMonthCalendar.Initialize(newoptions, newevents);

	//$.jMonthCalendar.Initialize(options, events);
	var extraEvents = [	{ EventID: 1, "Date": new Date(2011, 9, 11), "Title": "10:00 pm - EventTitle1", URL: "http://www.pertnearsandstone.com/Events/1" },
						{ EventID: 2, "Date": new Date(2011, 8, 20), "Title": "9:30 pm - this is a much longer title", URL: "http://www.pertnearsandstone.com/Events/1" }
	];
	
	//$("#Button").click(function() {					
	//	$.jMonthCalendar.AddEvents(extraEvents);
	//});
});
</script>
</head>
<body><div class="divContainer">
	<jsp:include page="menu.jsp"></jsp:include>
	
	<table class="tblContentContainer"><tr>
			<td class="tblContentContainer left">
				<table class="tblContent">
					<thead><td class="tblContent bigHeader">PROJECTS</td></thead>
					<tr><td class="tblContent quotes">"Writing of quotes here!"</td></tr>
					<tr><td class="tdAllProjects">
						<div class="allProjects">		
							<div class="allProjects-slider">
								<div id="projectList" style="width: 5820px; margin-left: -2910px; ">
									<div class="item">
										<span class="projectTitle">Omo | Event Launching</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-OMO.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: RED; width: 35px;"></div>
											</div>
											<span>PM: Quynh Bui</span>
											<br/>
											<span>10 | 07 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">IBM | Event</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-IBM.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: BLUE; width: 105px;"></div>
											</div>
											<span>PM: Vo Ky</span>
											<br/>
											<span>10 | 10 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">Miranda | Event Launching</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-MIRANDA.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: GREY; width: 85px;"></div>
											</div>
											<span>PM: Quach Tinh</span>
											<br/>
											<span>30 | 07 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">SAMSUMG | Event</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-SAMSUNG.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: RED; width: 15px;"></div>
											</div>
											<span>PM: Lenh Ho Xung</span>
											<br/>
											<span>10 | 07 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">Omo | Event Launching</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-OMO.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: RED; width: 35px;"></div>
											</div>
											<span>PM: Quynh Bui</span>
											<br/>
											<span>10 | 07 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">Omo | Event Launching</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-OMO.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: RED; width: 35px;"></div>
											</div>
											<span>PM: Quynh Bui</span>
											<br/>
											<span>10 | 07 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">IBM | Event</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-IBM.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: BLUE; width: 105px;"></div>
											</div>
											<span>PM: Vo Ky</span>
											<br/>
											<span>10 | 10 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">Omo | Event Launching</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-OMO.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: RED; width: 35px;"></div>
											</div>
											<span>PM: Quynh Bui</span>
											<br/>
											<span>10 | 07 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">IBM | Event</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-IBM.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: BLUE; width: 105px;"></div>
											</div>
											<span>PM: Vo Ky</span>
											<br/>
											<span>10 | 10 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">Omo | Event Launching</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-OMO.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: RED; width: 35px;"></div>
											</div>
											<span>PM: Quynh Bui</span>
											<br/>
											<span>10 | 07 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">IBM | Event</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-IBM.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: BLUE; width: 105px;"></div>
											</div>
											<span>PM: Vo Ky</span>
											<br/>
											<span>10 | 10 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">Omo | Event Launching</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-OMO.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: RED; width: 35px;"></div>
											</div>
											<span>PM: Quynh Bui</span>
											<br/>
											<span>10 | 07 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">IBM | Event</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-IBM.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: BLUE; width: 105px;"></div>
											</div>
											<span>PM: Vo Ky</span>
											<br/>
											<span>10 | 10 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">Omo | Event Launching</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-OMO.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: RED; width: 35px;"></div>
											</div>
											<span>PM: Quynh Bui</span>
											<br/>
											<span>10 | 07 | 2011</span>
										</div>
									</div>
									<div class="item">
										<span class="projectTitle">IBM | Event</span>
										<div class="projectInfo">
											<a class="" href="">
												<div class="projectImage"><img src="images-projects/proj-IBM.jpg" alt=""/></div>
											</a>
											<div class="projectStatusBoundary">
												<!--span>1</span><span>2</span><span>3</span><span>4 </span><span>5</span><span>6</span-->
												<div class="statusBar" style="background-color: BLUE; width: 105px;"></div>
											</div>
											<span>PM: Vo Ky</span>
											<br/>
											<span>10 | 10 | 2011</span>
										</div>
									</div>
								</div>	
							</div>
							<div class="projectSearch">
								<a href=""><img src="images-interface/orange_plus.gif" align="top" style="margin-top: 2px;"/></a>
								<input style="height: 20px; font-size:85%;" type="input" size="55" placeholder="Type to search here! Type to search here!"></input>
							</div>
							<div class="projectPaging">
								<span id="prevButton"><img src="images-interface/left_narrow.gif"/> Previous</span>
								<span class="pageList" id="pageList">
								<!--	<span class="pageListChild" id="page1" onClick="pageListButton(this.id)">1</span>
									<span class="pageListChild" id="page2" onClick="pageListButton(this.id)">2</span>
									<span class="pageListChild" id="page3" onClick="pageListButton(this.id)">3</span>
									<span class="pageListChild" id="page4" onClick="pageListButton(this.id)">4</span>
									-->
								</span>
								<span id="nextButton">Next <img src="images-interface/right_narrow.gif"/></span>	
							</div>
							<script language="javascript">projectSlideInit();</script>
						</div>
					</td></tr>					
					<tr><td class="tblContent smallHeader">FORUM</td></tr>
					<tr><td >
						<img width="640px" src="images-interface/forum_content.png"/>
					</td></tr>
				</table>
			</td>
			<td class="tblContentContainer right">
				<table class="tblContent">
					<thead><td class="tblContent bigHeader" colspan="2">
						<span>TODAY</span>
						<br />
						<span style="font-size:13;" id="todayLabel"></span>
					</td></thead>
					<tr>
						<td class="tblContent operations">
							<table class="tblOperations">
								<thead><td class="tblOperations header">Activities</td></thead>
								<tr><td>
									<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
									<span class="tblOperations No">[9]</span>
									<span class="tblOperations content">My tasks</span>
								</td></tr>
								<tr><td>
									<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
									<span class="tblOperations No">[29]</span>
									<span class="tblOperations content">Tasks where I am the Manager [(14) overdue]</span>
								</td></tr>
								<tr><td>
									<span class="tblOperations icon"><img src="images-interface/ico_issue.gif"/></span>
									<span class="tblOperations No">[49]</span>
									<span class="tblOperations content">My Issues [(7) overdue]</span>
								</td></tr>
								<tr><td>
									<span class="tblOperations icon"><img src="images-interface/ico_alert.gif"/></span>
									<span class="tblOperations No">[10]</span>
									<span class="tblOperations content">Alert</span>
								</td></tr>
								<tr><td class="tblOperations blankLine"></td></tr>
							</table>
							<table class="tblOperations">
								<thead><td class="tblOperations header" colspan="2">Approvals</td></thead>
								<tr>
									<td class="tblOperations item">										
										<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
										<span class="tblOperations No">[20]</span>
										<span class="tblOperations content">Expense Sheets</span>
									</td>
									<td class="tblOperations item">
										<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
										<span class="tblOperations No">[2]</span>
										<span class="tblOperations content">Expense Sheets</span>
									</td>
								</tr>
								<tr>
									<td class="tblOperations item">										
										<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
										<span class="tblOperations No">[2]</span>
										<span class="tblOperations content">Change Requests</span>
									</td>
									<td class="tblOperations item">
										<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
										<span class="tblOperations No">[2]</span>
										<span class="tblOperations content">Change Requests</span>
									</td>
								</tr>
								<tr><td class="tblOperations blankLine" colspan="2"></td></tr>
							</table>
							<table class="tblOperations">
								<thead><td class="tblOperations header" colspan="2">All New Items</td></thead>
								<tr>
									<td class="tblOperations item">										
										<span class="tblOperations icon"></span>
										<span class="tblOperations No">[9]</span>
										<span class="tblOperations content">Projects</span>
									</td>
									<td class="tblOperations item">										
										<span class="tblOperations icon"></span>
										<span class="tblOperations No">[10]</span>
										<span class="tblOperations content">Documents</span>
									</td>
								</tr>
								<tr>
									<td class="tblOperations item">										
										<span class="tblOperations icon"></span>
										<span class="tblOperations No">[20]</span>
										<span class="tblOperations content">Milestones</span>
									</td>
									<td class="tblOperations item">										
										<span class="tblOperations icon"></span>
										<span class="tblOperations No">[2]</span>
										<span class="tblOperations content">Notes</span>
									</td>
								</tr>
								<tr>
									<td class="tblOperations item">										
										<span class="tblOperations icon"></span>
										<span class="tblOperations No">[546]</span>
										<span class="tblOperations content">Tasks</span>
									</td>
									<td class="tblOperations item">										
										<span class="tblOperations icon"></span>
										<span class="tblOperations No">[4]</span>
										<span class="tblOperations content">Discussions</span>
									</td>
								</tr>
								<!-- <tr><td class="tblOperations blankLine" colspan="2"></td></tr> -->
							</table>
						</td>
						<td class="tblContent calendar">
							<table class="tblOperations">
								<thead><td class="tblOperations header">Calendar</td></thead>
								<tr><td class="MonthlyCalendar" id='jMonthCalendar'>
									<!--<div class="MonthlyCalendar" id='jMonthCalendar'>Calendar here!</div>-->
								</td></tr>								
							</table>
							<table class="tblOperations eventList">
								<thead><td class="tblContent smallHeader" style="text-align: right; padding-right:10px;">List Events</td></thead>
								<tr><td class="tblOperations content" style="padding-left:10px;">Upcoming Events</td></tr>
								<tr><td style="background-color: WHITE;height: 100%;">
									<ul>
										<li>FIFA 2012</li>
										<li>PES 2012</li>
										<li>Football Manager 2012</li>
									</ul>
								</td></tr>
							</table>
						</td>
					</tr>
				</table>
				<table class="tblMail">
					<thead><td class="tblOperations header">Mail</td></thead>
					<tr><td style="height:200px;text-align:center; border: solid 1px #DBDBDC;">
						Email here!
					</td></tr>
				</table>
			</td>
			</tr></table>
</div></body>
</html>